//Assets
import React from "react";
import ReactDOM from "react-dom";
import ApiFactory from "./scripts/ApiFactory/ApiFactory";
//Modules
import Select from "./components/Select";
//Locale Setting
import {addLocaleData,IntlProvider} from "react-intl";
import zh from "react-intl/locale-data/zh";
import en from "react-intl/locale-data/en";
import zh_CN from "./locale/zh_CN";
import en_US from "./locale/en_US";
import {injectIntl} from "react-intl";

let messages = {};
messages["en-US"] = en_US;
messages["zh-CN"] = zh_CN;
const languages = navigator.languages;
const currentLang = languages[0];
addLocaleData([...zh,...en]);


//国家省市筛选模块
class SelectContent extends React.Component{

    constructor(props){
        super(props);
        this.state ={
            currentCountry:{
                "code":null,
                "name":null
            },
            currentProvince:{
                "code":null,
                "name":null
            },
            currentCity:{
                "code":null,
                "name":null
            },
            countrysList :[{
                "code":null,
                "name":this.props.intl.messages.txt_select_country
            }],
            provincesList :[  {
                "code":null,
                "name":this.props.intl.messages.txt_select_province
            }],
            citiesList :[  {
                "code":null,
                "name":this.props.intl.messages.txt_select_city
            }],
        };
        this.handleChangeOption = this.handleChangeOption.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }


    handleClick(e,localeType){
        switch (localeType) {
        case "country":
                //如果当前为null，加载国家列表；
            if(!this.state.currentCountry.code){

                let fetchData = ApiFactory({
                    url:"/pc/server-api/geo-location/countries",
                    method:"GET",
                    contentType:"application/json; charset=utf-8",
                    dateType:"json"

                });

                fetchData().fetch().done(
                    (data)=>{
                        if(!data.length){
                            return null;
                        }else{
                            this.setState(function(prev){
                                let curCountry = null;

                                if(!prev.currentCountry.code){
                                    curCountry = {
                                        "code":data[0].code,
                                        "name":data[0].name
                                    };

                                    return {
                                        countrysList: data,
                                        provincesList :[  {
                                            "code":null,
                                            "name":this.props.intl.messages.txt_select_province
                                        }],
                                        citiesList :[  {
                                            "code":null,
                                            "name":this.props.intl.messages.txt_select_city
                                        }],
                                        currentCountry:curCountry
                                    };
                                }else{


                                    return {
                                        countrysList: data,
                                        provincesList :[  {
                                            "code":null,
                                            "name":this.props.intl.messages.txt_select_province
                                        }],
                                        citiesList :[  {
                                            "code":null,
                                            "name":this.props.intl.messages.txt_select_city
                                        }]
                                    };
                                }
                            });
                        }
                    }
                );
                }else{
                    this.handleChangeOption(e,localeType);
                }
                break;
            case "province":
                if(!this.state.currentCountry.code){
                    return null;
                }else{


                    let fetchData = ApiFactory({
                        url:"/pc/server-api/geo-location/country/"+ this.state.currentCountry.code + "/provinces",
                        method:"GET",
                        contentType:"application/json; charset=utf-8",
                        dateType:"json"

                    });

                    fetchData().fetch().done(
                        (data)=>{

                            if(!data.length){
                                return null;
                            }else {

                                this.setState(function(prev){
                                    let curProvince = null;

                                    if(!prev.currentProvince.code){
                                        curProvince = {
                                            "code":data[0].code,
                                            "name":data[0].name
                                        };

                                        return {
                                            provincesList: data,
                                            citiesList :[  {
                                                "code":null,
                                                "name":this.props.intl.messages.txt_select_city
                                            }],
                                            currentProvince:curProvince
                                        };
                                    }else {

                                        return {
                                            provincesList: data
                                        };
                                    }
                                });
                            }
                        }
                    );
                }
                break;
            case "city":
                if(!this.state.currentProvince.code){
                    return null;
                }else{

                    let fetchData = ApiFactory({
                        url:"/pc/server-api/geo-location/province/"+ this.state.currentProvince.code + "/cities",
                        method:"GET",
                        contentType:"application/json; charset=utf-8",
                        dateType:"json"

                    });

                    fetchData().fetch().done(
                        (data)=>{
                            if(!data.length){
                                return null;
                            }else {


                                this.setState(function(prev){
                                    let curCity = null;

                                    if(!prev.currentCity.code){
                                        curCity = {
                                            "code":data[0].code,
                                            "name":data[0].name
                                        };

                                        return {
                                            citiesList: data,
                                            currentCity:curCity
                                        };
                                    }else{

                                        return {
                                            citiesList: data
                                        };
                                    }
                                });
                            }
                        }
                    );
                }
                break;
            default:
                return;
        }
    }

    handleChangeOption(e,props){
        let type = props.localeType;
        let optionCode = e.target[e.target.selectedIndex].id;
        let optionValue = e.target.value;
        switch (type) {
            case "country":
                this.setState({
                    currentCountry:{
                        "code":optionCode,
                        "name":optionValue
                    },
                    currentProvince:{
                        "code":null,
                        "name":null
                    },
                    currentCity:{
                        "code":null,
                        "name":null
                    },
                    provincesList :[{
                        "code":null,
                        "name":this.props.intl.messages.txt_select_province
                    }],
                        citiesList :[{
                        "code":null,
                        "name":this.props.intl.messages.txt_select_city
                    }]
                });
                break;
            case "province":
                this.setState({
                    currentProvince:{
                        "code":optionCode,
                        "name":optionValue
                    },
                    currentCity:{
                        "code":null,
                        "name":null
                    },
                    citiesList :[{
                        "code":null,
                        "name":this.props.intl.messages.txt_select_city
                    }]
                });
                break;
            case "city":
                this.setState({
                    currentCity:{
                        "code":optionCode,
                        "name":optionValue
                    }
                });
                break;
            default:
                return;
        }
    }

    render(){
        return (
            <div>
                <Select localeType="country" handleClick={this.handleClick} handleChange={this.handleChangeOption} lists={this.state.countrysList}/>
                <Select localeType="province" handleClick={this.handleClick}  handleChange={this.handleChangeOption} lists={this.state.provincesList}/>
                <Select localeType="city" handleClick={this.handleClick}  handleChange={this.handleChangeOption} lists={this.state.citiesList}/>
            </div>
        )
    }
}

const SelectField = injectIntl(SelectContent);

ReactDOM.render(
    <IntlProvider  locale={currentLang} messages={messages[currentLang]}>
        <SelectField />
    </IntlProvider>,
    document.getElementById("root")
)